import React from 'react'
import style from './style'
import { Link } from '../'
import { findDOMNode } from 'react-dom'

export default
class InputUsers extends React.Component {

  state = {
    users: [
      {
        fullName: 'hi'
      },
      {
        fullName: 'hello'
      },
      {
        fullName: 'ok'
      },
      {
        fullName: 'ok'
      },
    ],
    width: 0
  }

  minWidth = 100

  componentDidMount() {
    const usersWidth = this.refs.ul.getBoundingClientRect().width
    const inputWidth = 300 - usersWidth
    if (inputWidth < this.minWidth) {

    } else {
      this.setState({
        inputWidth
      })
    }
  }

  render() {
    return (
      <div className={style.root}>
        {
          this.state.users? (
            <ul ref='ul' className={style.users}>
              {
                this.state.users.map((v, i) => (
                  <li 
                    key={i}
                    ref={el => {
                      if (v.add && el && !el.set) {
                        el.set = true
                        console.log(el.getBoundingClientRect().width)
                        this.setState({
                          inputWidth: this.state.inputWidth - el.getBoundingClientRect().width
                        })
                      }
                    }}
                  >
                    <span>{ v.fullName }</span>
                    <Link icon="close" size="16"/>
                  </li>
                ))
              }
            </ul>
          ): null
        }
        <input 
          onKeyUp={e => {
            if (e.which == 13) {
              this.setState({
                users: [
                  ...this.state.users,
                  {
                    add: true,
                    fullName: e.target.value
                  }
                ]
              })
            }
          }}
          style={{
            width:  this.state.inputWidth + 'px'
          }}/>
      </div>
    )
  }
}
